<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>4_getSnapshotBeforeUpdate的使用场景</title>
    <style>
        .newsClass{
            width: 200px;
            height: 180px;
            background-color: skyblue;
            overflow: auto;
        }
        .news{
            width: 200px;
            height: 30px;
        }
    </style>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script
      type="text/javascript"
      src="../js/17.0.1/react.development.js"
    ></script>
    <!-- 引入react-dom, 用于支持react操作DOM -->
    <script
      type="text/javascript"
      src="../js/17.0.1/react-dom.development.js"
    ></script>
    <!-- 引入babel, 用于将jsx转为js -->
    <script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>

    <script type="text/babel">
      class News extends React.Component {

        /*
            1. 初始化阶段： 由ReactDOM.render()触发---初次渲染
                1. constructor()
                2. getDerivedStateFromProps()
                3. render()
                4. componentDidMount() ==> 常用
                        一般这这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
            2. 更新阶段：由组件内部this.setState()或父组件render触发
                1. shouldComponentUpdate()
                2. getSnapshotBeforeUpdate()
                3. render() ==> 必须使用的一个
                4. componentDidUpdate()
            3. 卸载组件：由ReactDOM.unmountComponentAtNode()触发
                1. componentWillUnmount() ==> 常用
                    一般这这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
        */

        state = {
          newsArr: [],
        };

        componentDidMount(){
            setInterval(()=>{
                //获取原状态
                const {newsArr} = this.state;
                //模拟一条新闻
                let news = '新闻' + (newsArr.length+1)
                //更新状态
                this.setState({newsArr:[news,...newsArr]})
            },1000)
        }

        getSnapshotBeforeUpdate(){
            return this.refs.newsRef.scrollHeight
        }

        componentDidUpdate(preProps,preState,height){
            this.refs.newsRef.scrollTop += this.refs.newsRef.scrollHeight - height; 
        }

        render() {
          return (
            <div className="newsClass" ref="newsRef">
              {this.state.newsArr.map((n, index) => {
                return <div key={index} className="news">{n}</div>;
              })}
            </div>
          );
        }
      }
      ReactDOM.render(<News/>, document.getElementById("test"));
    </script>
  </body>
</html>
